{% extends "layout/base.html" %}

{% block content %}
	<link rel="stylesheet" href="{{ MEDIA_URL }}css/calendar.css?random=20051112" type="text/css" media="screen" /> 
    <script type="text/javascript" src="{{ MEDIA_URL }}js/calendar.js?random=20060118"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}js/aucompleteCity.js"></script>

	<h1><span>Résultat de votre recherche :</span> 4 trajets pour "Paris > UMLV"</h1>
	<form method="post" action="/basic_search/" id="form_search">
		<div><label for="city_d">Ville de départ</label>
		<input type="text" name="city_d" id="city_d" size="18" /></div>
		<div><label for="city_a">Ville d'arrivée</label>
		<input type="text" name="city_a" id="city_a" size="18" /></div>
		<div><label for="date" >Date</label>
		<input type="text" value=""  name="date" class="date" size="18"  style="width:130px" id="date" onclick="displayCalendar(this,'yyyy-mm-dd',this,true)"/>
		</div>
		<input type="submit" class="submit_search" value="Rechercher" />
	</form>
	
	<a title="Affiner la recherche" state="off" id="link_refine_search" class="link_refine_search_off" href="#">Affiner la recherche</a>
	<div id="refine_search">
		<form method="post" action="/refined_search/" id="form_refine_search">
		<div><label for="city_d">Ville de départ</label>
		<input type="text" name="city_d" id="city_d" size="18" />
		<label for="city_a">Ville d'arrivée</label>
		<input type="text" name="city_a" id="city_a" size="18" />
		<label for="date" >Date</label>
            <input type="text" value=""  name="date" size="18"  style="width:130px" class="date" onclick="displayCalendar(this,'yyyy-mm-dd',this,true)"/>
		</div>
			<div class="form_refine_left">
				<p><select name="type_user">
					<option value="driver">Je recherche un conducteur</option>
					<option value="passenger">Je recherche des passagers</option>
				</select></p>
				
				<p><input type="radio" name="is_smoker" value="fumeur"><label>Fumeur</label>
				<input type="radio" name="is_smoker" value="non_fumeur"><label>Non fumeur</label></p>
				
				<p><input type="radio" name="speak" value="bavard"><label>Bavard</label>
				<input type="radio" name="speak" value="non_bavard"><label>Silencieux</label></p>
			</div>
			<div class="form_refine_left">
				<p>
					Budget entre <input type="text" name="price_min" id="price_min" size="2" />€ et <input type="text" name="price_max" id="price_maxi" size="2" />€ 
				</p>
				
				<p><select name="type_music">
					<option value="select">Musique</option>
					<option value="pop">Pop</option>
					<option value="rock">Rock</option>
					<option value="electro">Electro</option>
				</select></p>
				
				<p><input type="checkbox" name="bag" value="big_bag"><label>Je voyage lourd</label></p>
			</div>
			<div class="form_refine_right">
				<p><span>Elargir : </span><input type="checkbox" name="5km" value="5km"><label>5 km</label>
									<input type="checkbox" name="10km" value="10km"><label>10 km</label>
									<input type="checkbox" name="15km" value="15km"><label>15 km</label>
				</select></p>
			</div>
			<input type="submit" class="submit_search" value="Rechercher" /> 
		</form>
	</div>
	<!--
	<form method="post" action="" id="order">
		<label for="order_by">Trier par</label>
		<select name="type_order_by">
			<option value="date">Date</option>
			<option value="price">Prix</option>
		</select>
	</form>
	
	<div class="results_search results_search_driver">
		<h2>Conducteurs qui recherchent des passagers</h2>
		<h3>Aujourd'hui</h3>
		<img src="{{ MEDIA_URL }}images/pointille-covoiturage-universite.jpg"/>
		<div class="result">
			<h3><a class="girl" title="nom_user" href="#">Nom</a></h3>
			<p class="note_search">
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.png"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.png"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-moitie.png"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.png"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.png"/>
				(5 avis)
			</p>
			<div class="user_search">
				<img alt="nom user" src="{{ MEDIA_URL }}images/photo-user.jpg"/>
				<a title="Contacter nom user" href="#">Contacter</a>
			</div>
			<div class="route_search">			
				<div class="infos_route_search bckg_grey">
					<h3><a href="">Paris > UMLV</a></h3>
					<p>le <span>5/12/2010</span> à <span>9h30</span></p>
				</div>
				<div class="nb_place_search bckg_grey">
					<p><span>3</span> places disponibles</p>
				</div>
				<div class="price_search bckg_grey">
					<p><span>5 €</span> par passager</p>
				</div>
				<div class="clear"></div>
				<a class="little_btn" title="Fiche trajet" href="#">Fiche trajet</a>
				<a class="big_btn" title="Participer au trajet" href="#">Participer au trajet</a>
			</div>
			<div class="clear"></div>
		</div>
		
		<div class="clear"></div>
		
		<div class="result">
			<h3><a class="girl" title="nom_user" href="#">Nom</a></h3>
			<p class="note_search">
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-moitie.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.jpg"/>
				(5 avis)
			</p>
			<div class="user_search">
				<img alt="nom user" src="{{ MEDIA_URL }}images/photo-user.jpg"/>
				<a title="Contacter nom user" href="#">Contacter</a>
			</div>
			<div class="route_search">			
				<div class="infos_route_search bckg_grey">
					<h3><a href="">Paris > UMLV</a></h3>
					<p>le <span>5/12/2010</span> à <span>9h30</span></p>
				</div>
				<div class="nb_place_search bckg_grey">
					<p><span>3</span> places disponibles</p>
				</div>
				<div class="price_search bckg_grey">
					<p><span>5 €</span> par passager</p>
				</div>
				<div class="clear"></div>
				<a class="little_btn" title="Fiche trajet" href="#">Fiche trajet</a>
				<a class="big_btn" title="Participer au trajet" href="#">Participer au trajet</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	
	
	<div class="results_search results_search_passenger">
		<h2>Passagers qui recherchent des conducteurs</h2>
		<h3>Aujourd'hui</h3>
		<img src="{{ MEDIA_URL }}images/pointille-covoiturage-universite.jpg"/>
		<div class="result">
			<h3><a class="boy" title="nom_user" href="#">Nom</a></h3>
			<p class="note_search">
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-moitie.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.jpg"/>
				(5 avis)
			</p>
			<div class="user_search">
				<img alt="nom user" src="{{ MEDIA_URL }}images/photo-user.jpg"/>
				<a title="Contacter nom user" href="#">Contacter</a>
			</div>
			<div class="route_search">			
				<div class="infos_route_search bckg_grey">
					<h3><a href="">Paris > UMLV</a></h3>
					<p>le <span>5/12/2010</span> à <span>9h30</span></p>
				</div>
				<div class="clear"></div>
				<a class="little_btn" title="Fiche trajet" href="#">Fiche trajet</a>
				<a class="big_btn" title="Participer au trajet" href="#">Participer au trajet</a>
			</div>
			<div class="clear"></div>
		</div>
		
		<div class="clear"></div>
		
		<div class="result">
			<h3><a class="girl" title="nom_user" href="#">Nom</a></h3>
			<p class="note_search">
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-pleine.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-moitie.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.jpg"/>
				<img alt="note" src="{{ MEDIA_URL }}images/etoile-vide.jpg"/>
				(5 avis)
			</p>
			<div class="user_search">
				<img alt="nom user" src="{{ MEDIA_URL }}images/photo-user.jpg"/>
				<a title="Contacter nom user" href="#">Contacter</a>
			</div>
			<div class="route_search">			
				<div class="infos_route_search bckg_grey">
					<h3><a href="">Paris > UMLV</a></h3>
					<p>le <span>5/12/2010</span> à <span>9h30</span></p>
				</div>
				<div class="clear"></div>
				<a class="little_btn" title="Fiche trajet" href="#">Fiche trajet</a>
				<a class="big_btn" title="Participer au trajet" href="#">Participer au trajet</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>
    -->
	<div id="map_canvas" style="width:0; height:0px; visibility:hidden"></div>
{% endblock content %}
